<template>
  <div v-loading="loading" class="PlayerDetail">
    <div><h4>播报机详情</h4></div>
    <el-descriptions v-if="row" :column="3" border>
      <el-descriptions-item label="编号">{{ row.annoNum }}</el-descriptions-item>
      <el-descriptions-item label="版本">{{ row.edition }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag v-if="row.state == 'offline'" type="info" size="small">下线</el-tag>
        <el-tag v-else-if="row.state == 'online'" type="success" size="small">上线</el-tag>
        <el-tag v-else type="info" size="small">未知</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="门店">{{ row.storeName }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ row.storeAddress }}</el-descriptions-item>
      <el-descriptions-item label="添加时间">{{ row.bindingTime }} 人</el-descriptions-item>
    </el-descriptions>
    <div class="key-search">
      <el-form
        ref="form"
        :model="BindForm"
        label-width="80px"
        label-position="left"
      >
        <el-form-item prop="ic" label="IC卡:">
          <el-col :span="24">
            <el-input
              v-model="BindForm.ic"
              placeholder="请输入IC卡号"
              maxlength="30"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item prop="orderSn" label="订单编号:">
          <el-col :span="24">
            <el-input
              v-model="BindForm.orderSn"
              placeholder="请输入订单编号"
              maxlength="30"
              class="cus-input"
            />
          </el-col>
        </el-form-item>
        <el-form-item prop="orderType" label="订单类型:">
          <el-col :span="24">
            <el-select
              v-model="BindForm.orderType"
              placeholder="请选择订单类型"
              class="cus-input"
              style="width: 100%; max-width: 400px"
            >
              <el-option value="101" label="售卖" />
              <el-option value="102" label="售卖（退单）" />
              <el-option value="201" label="租赁" />
              <el-option value="202" label="租赁（退单）" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item prop="time" label="时间:">
          <el-col :span="24">
            <el-date-picker
              v-model="BindForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button
              plain
              style="margin-left:10px"
              @click="setWeek"
            >近一周</el-button>
            <el-button plain @click="setMonth">近一月</el-button>
            <el-button plain @click="setYear">近一年</el-button>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">筛选</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h4>打印订单记录</h4>
    <div class="ele-table">
      <el-table
        :data="BindTable"
        border
        max-height="600"
        :empty-text="
          loading
            ? '数据加载中'
            : isSearch
              ? '未找到相关的打印记录'
              : '暂无打印记录'
        "
      >
        <!--        <el-table-column-->
        <!--          label="序号"-->
        <!--          type="index"-->
        <!--          align="center"-->
        <!--          width="80"-->
        <!--          :resizable="false"-->
        <!--          fixed="left"-->
        <!--        />-->
        <el-table-column
          label="订单编号"
          prop="orderSn"
          align="center"
          width="220"
          :resizable="false"
          fixed="left"
        />
        <el-table-column
          label="商品"
          prop="goodsName"
          align="center"
          width="180"
          :resizable="false"
        />
        <el-table-column
          label="订单类型"
          prop="orderType"
          align="center"
          :resizable="false"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.orderType == '101'">售卖</span>
            <span v-else-if="scope.row.orderType == '102'">售卖（退单）</span>
            <span v-else-if="scope.row.orderType == '201'">租赁</span>
            <span v-else-if="scope.row.orderType == '202'">租赁（退单）</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          label="IC卡号"
          prop="icCard"
          align="center"
          width="140"
          :resizable="false"
        />
        <el-table-column
          label="收货地址"
          prop="address"
          align="center"
          min-width="300"
          :resizable="false"
        />
        <el-table-column
          label="打印时间"
          prop="addTime"
          align="center"
          width="160"
          :resizable="false"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          fixed="right"
          width="90"
          :resizable="false"
        >
          <!-- TODO SLJ 下面需要跳转到订单详情，目前是随便跳的页面 -->
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'YWC',
                  query: { orderSn: scope.row.orderSn }
                })
              "
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <div />
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>

<script>
import { playerPrintList } from '@/api/shop'
/** 播报机详情 */
export default {
  name: 'PlayerDetail',
  data() {
    return {
      row: null,
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      BindForm: {
        ic: null,
        orderSn: null,
        orderType: null,
        time: null
      },
      BindTable: []
    }
  },
  created() {
    const vm = this

    const params = vm.$dd(vm.$route.query.p)

    if (!params) {
      this.$alert('禁止非法访问！', '系统提示', {
        confirmButtonText: '确定',
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: 'error',
        callback: action => {
          vm.$store.dispatch('tagsView/delView', vm.$route)
          vm.$router.go(-1)
        }
      })
      return
    }
    vm.row = params

    vm.loadTableData()
  },
  methods: {
    search() {
      const vm = this
      vm.reloadTableData()
    },
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    setWeek() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setMonth() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setYear() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 364)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.reloadTableData()
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.loadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        storeId: vm.row.storeId,
        num: vm.row.annoNum,
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.ic && vm.BindForm.ic.length > 0) {
        data['ic'] = vm.BindForm.ic
        vm.isSearch = true
      }

      if (vm.BindForm.orderSn && vm.BindForm.orderSn > 0) {
        data['orderSn'] = vm.BindForm.orderSn
        vm.isSearch = true
      }

      if (vm.BindForm.orderType && vm.BindForm.orderType > 0) {
        data['orderType'] = vm.BindForm.orderType
        vm.isSearch = true
      }

      if (vm.BindForm.time && vm.BindForm.time.length === 2) {
        data['time'] = {
          startTime: vm.BindForm.time[0],
          endTime: vm.BindForm.time[1]
        }
        vm.isSearch = true
      }

      vm.loading = true
      playerPrintList(data)
        .then(res => {
          vm.loading = false
          vm.total = res.data.data.total
          vm.BindTable = res.data.data.data ? res.data.data.data : []
        })
        .catch(res => {
          vm.loading = false
          if (res && res.data && res.data.errno !== 0) {
            this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.PlayerDetail {
  padding: 30px;

  .cus-info-item {
    padding: 20px 30px;
    margin-bottom: 30px;
    padding-bottom: 0;
    border: 1px solid #eeeeee;

    .form-item {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      line-height: 24px;
      font-size: 14px;
      color: #000;
      margin-bottom: 20px;

      .form-name {
        flex-shrink: 0;
        text-align: left;
        font-weight: 700;
        color: #606266;
        margin-right: 20px;
      }

      .form-info {
        flex: 1;
        color: #444444;
        text-align: left;
        word-break: break-all;
      }
    }
  }
  .key-search {
    margin-top: 30px;
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eeeeee;

    .cus-input {
      max-width: 400px;
    }
  }
  .ele-table,
  .pagination {
    margin-bottom: 30px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
